<template>
  <div id="line-chart" ref="linechart" style="width: 100%;height: 100%">
    <!-- 饼状图 -->
  </div>
</template>

<script>
import echarts from 'echarts'
import resize from '../../mixins/resize'
import { formatTime } from '@/utils/index'
import ApiObj from '@/api/monitoring'
// 引入提示框和标题组件
// 引入 折线图
require('echarts/lib/chart/line')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
export default {
  components: {},
  mixins: [resize],
  props: {
    // eslint-disable-next-line vue/require-default-prop
    personnew: Array
  },
  data() {
    return {
      chart: null,
      person: []
    }
  },
  watch: {
    person: {
      handler(n, o) {
        console.log(n)
        this.echartsInit()
      },
      deep: true
      // immediate: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getUseTrend({ provinceCode: 2, type: 'hour' })
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    formatData(data) {
      this.person[0] = data.map(item => {
        return item.countSuccess
      })
      this.person[1] = data.map(item => {
        return item.countFail
      })
      this.person[2] = data.map(item => {
        return formatTime(item.sttTime)
      })
    },
    getUseTrend(data) {
      let params = {
        provinceCode: data.provinceCode
      }
      switch (data.type) {
        case 'hour':
          ApiObj.hour_total(params).then(res => {
            this.formatData(res.data.data)
            this.echartsInit()
          })
          break
        case 'day':
          ApiObj.day_total(params).then(res => {
            this.formatData(res.data.data)
            this.echartsInit()
          })
          break
        case 'month':
          ApiObj.month_total(params).then(res => {
            this.formatData(res.data.data)
            this.echartsInit()
          })
          break
      }
    },
    echartsInit() {
      console.log(this.person)
      this.chart = echarts.init(this.$refs.linechart)
      var option = {
        // backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#02D2D9'
            }
          }
        },
        legend: {
          data: ['国家下发应用', '地方自研应用'],
          orient: 'horizontal',
          align: 'left',
          x: 'center',
          y: '20px'
        },
        // 图表距边框的距离
        grid: {
          top: '70px',
          left: '30px',
          right: '40px',
          bottom: '25px',
          containLabel: true
        },
        // x轴
        xAxis: {
          type: 'category',
          data: this.person[2],
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: 'rgb(49, 192, 228)' // 设置x轴的颜色
            }
          },
          // 刻度线
          axisTick: {
            show: false
          }
        },
        // y轴
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              // 设置y轴颜色
              color: '#87CEFA'
            }
          },
          // 刻度线
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: '国家下发应用',
            symbolSize: 8,
            data: this.person[0],
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                color: '#0dd'
              }
            }
          },
          {
            name: '地方自研应用',
            symbolSize: 8,
            data: this.person[1],
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                color: '#f44'
              }
            }
          }
        ]
      }
      this.chart.setOption(option)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
</style>
